<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Chenqiu
 * @LastEditTime: 2021-09-23 09:23:05
-->
<template>
  <!-- 2.创建一个图表容器 容纳图表 -->
  <div ref="root" style="height: 90%"></div>
</template>
<script>
// vue3
// import { Line } from "@antv/g2plot"
// import {ref,onMounted} from 'vue'
// export default {
//   // vue3 新特性
//   setup() {
//     // 获取dom节点
//     let root = ref(null);
//     let line = null;
//     // 创建一个折线图实例对象
//     let initCharts = () => {
//       line = new Line(root.value, {
//         data: [
//           { year: "1991", value: 3 },
//           { year: "1992", value: 4 },
//           { year: "1993", value: 3.5 },
//           { year: "1994", value: 5 },
//           { year: "1995", value: 4.9 },
//         ],
//         xField:'year',
//         yField:'value',
//       });
//       // 渲染
//       line.render();
//     };
//     // mounted和onMounted作用一致
//     onMounted(initCharts);
//     return{
//       root
//     }
//   },
// };

import { Radar } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      const data = [
        { name: "G2", star: 10371 },
        { name: "G6", star: 7380 },
        { name: "F2", star: 7414 },
        { name: "L7", star: 2140 },
        { name: "X6", star: 660 },
        { name: "AVA", star: 885 },
        { name: "G2Plot", star: 1626 },
      ];
      let radarPlot = new Radar(this.$refs['root'], {
        data: data.map((d) => ({ ...d, star: Math.sqrt(d.star) })),
        xField: "name",
        yField: "star",
        appendPadding: [0, 10, 0, 10],
        meta: {
          star: {
            alias: "star 数量",
            min: 0,
            nice: true,
            formatter: (v) => Number(v).toFixed(2),
          },
        },
        xAxis: {
          tickLine: null,
        },
        yAxis: {
          label: false,
          grid: {
            alternateColor: "rgba(0, 0, 0, 0.04)",
          },
        },
        // 开启辅助点
        point: {
          size: 2,
        },
        area: {},
      });
      radarPlot.render();
    },
  },
};
</script>